import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Text from 'rax-text';
import TextInput from "rax-textinput";
import NavBar from '@/components/NavBar';
import ModalTemplate from '@/components/ModalTemplate';
import { usePageShow } from 'rax-app';
import { actionSheet } from '@uni/apis';
import {
  queryUserArchivesList,
  postUserArchivesEdit,
  postUserArchivesDel
} from "@/api";
import './index.css';

const Mine = () => {
  const [titleBarHeight, setTitleBarHeight] = useState(0);
  const [showMask, setShowMask] = useState(false);
  const [showTemmplate, setShowTemplate] = useState(false);
  const [selectId, setSelectId] = useState(null);
  const [delId, setDelId] = useState(null);
  const [showDelete, setShowDelete] = useState(false);
  const [list, setList] = useState([]);
  const [name, setName] = useState('');


  usePageShow(() => {
    my.getSystemInfo({
      success: (res) => {
        let height = res.titleBarHeight + res.statusBarHeight
        setTitleBarHeight(height)
      }
    });
    onLoadData();
  })

  const onLoadData = () => {
    queryUserArchivesList({})
      .then(res=>{
        console.log('res', res);
        setList(res.list);
      })
  }

  const doBack = () => {
  }

  const onShowRemoveAction = (id) => {
    setShowDelete(true);
    setDelId(id);
    // actionSheet({
    //   itemList: ['删除']
    // }).then(res => {
    //   let {
    //     tapIndex
    //   } = res;
    //   if (tapIndex == 0) {
    //     postUserArchivesDel({id: id})
    //       .then(res=>{
    //         my.showToast({
    //           content: '删除成功',
    //           type: 'none',
    //           zIndex: 9999,
    //           success: () => {
    //             setShwoDelete(false);
    //             setDelId(null);
    //             onLoadData();
    //           }
    //         });
    //       })
    //   }
    // });
  }

  const onSureDelete = () => {
    postUserArchivesDel({id: delId})
      .then(res=>{
        my.showToast({
          content: '删除成功',
          type: 'none',
          zIndex: 9999,
          success: () => {
            onLoadData();
            setShowDelete(false);
            setDelId(null);
          }
        });
      })
  }

  const onAddProfile = () => {
    setShowMask(true);
    setShowTemplate(true);
  }

  const onChange = (event) => {
    setName(event);
  }

  const onSureChangeName = () => {
    let params = {
      id: selectId,
      archives_name: name
    }
    if (!name) {
      my.showToast({
        content: '名字不能为空',
        type: 'none'
      })
      return;
    }
    postUserArchivesEdit({id: selectId, archives_name: name})
      .then(res=>{
        my.showToast({
          content: '修改成功',
          type: 'none',
          zIndex: 9999,
          success: () => {
            setName('');
            setSelectId(null);
            onLoadData();
          }
        });
      })
      .catch(err=>{
        my.showToast({
          content: '修改失败',
          type: 'none',
          zIndex: 9999
        })
      })
  }

  const onChooseName = (id) => {
    let targetName = '';
    list.forEach(item=>{
      if (item.id == id) {
        targetName = item.archives_name
      }
    });
    setName(targetName);
    setSelectId(id);
  }
  
  return (
    <View className='faceprofile_container'>
      <NavBar 
        title="我的脸部档案"
        onClick={()=>{doBack()}}
      />
      <View
        className='faceprofile_section'
        style={{
          paddingTop: `${titleBarHeight}px`
        }}
      >
        <View
          className='faceprofile_view'
          style={{
            height: `calc(100vh - ${titleBarHeight}px)`
          }}
        >
          {
            list.map(item=>
              <View className='faceprofile_view_section' key={item.id}>
                <View className='faceprofile_view_section_main'>
                  <Image
                    source={{
                      uri: item.archives_img
                    }}
                    className='faceprofile_view_section_main_img'
                    mode='aspectFill'
                  />
                </View>
                <TextInput
                  className='faceprofile_view_section_name'
                  value={item.id == selectId ? name : item.archives_name}
                  autofocus={item.id == selectId ? true : false}
                  onChangeText={(e)=>{onChange(e)}}
                  onChange={()=>{onSureChangeName()}}
                  maxLength={6}
                />
                <View className='faceprofile_view_section_actions'>
                  <View
                    className='faceprofile_view_section_actions_item del'
                    onClick={()=>{onShowRemoveAction(item.id)}}
                  >
                    删除
                  </View>
                  <View
                    className='faceprofile_view_section_actions_item edit'
                    onClick={()=>{onChooseName(item.id)}}
                  >
                    修改名称
                  </View>
                </View>
              </View>
            )
          }
        </View>
        <View
          className='faceprofile_section_add'
          onClick={()=>{onAddProfile()}}
        >
          添加脸部档案
        </View>
      </View>
      {
        showMask ? (
          <View className='mask' onClick={()=>{setShowMask(false)}}>
            {
              showTemmplate ? (
                <ModalTemplate
                  showTemmplate={showTemmplate}
                  onClose={()=>{setShowTemplate(false)}}
                />
              ) : null
            }
          </View>
        ) : null
      }
      {
        showDelete ? (
          <View className='mask' onClick={()=>{setShowDelete(false)}}>
            <View className='delete_view'>
              <View className='delete_view_sure' onClick={()=>{onSureDelete()}}>删除</View>
              <View className='delete_view_cancel' onClick={()=>{setShowDelete(false)}}>取消</View>
            </View>
          </View>
        ) : null
      }
    </View>
  )
}
export default Mine;
